<template>
    <div>
        <button type="button" @click="getUsersPageHandler">获取用户数据</button>
        <button type="button" @click="PostUsersHandler">添加用户</button>
        <button type="button" @click="PutUsersByUserIdHandler">修改用户</button>
        <button type="button" @click="DeleteUsersByIdsHandler">删除用户</button>

        <ul>
            <li v-for="item in users" :key="item.id">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { getUsersPage, PostUsers, PutUsersByUserId, DeleteUsersByIds } from '@/service/study5/demo3'
import { type UserType } from '@/service/types/type53'




const users = ref<UserType[]>([])

// 获取用户分页列表
const getUsersPageHandler = async () => {
    const res = await getUsersPage({ pageSize: 50, pageNum: 1 })
    console.log(res.data.list);
    users.value = res.data.list
}

// post 添加用户
const PostUsersHandler = async () => {
    const newUser = {
        username: "lwj1191",
        nickname: "lwj111",
        email: "w.gdllcu@qq.com",
        gender: 1,
        password: "magna anim in ut ullamco",
        mobile: "18174302231",
        id: 10256,
        avatar: "http://dummyimage.com/100x100",
        status: 72,
        deptId: 43,
        roleIds: [
            69,
            61
        ]
    }
    const res = await PostUsers(newUser)
    console.log(res);

}

// put 通过用户的id修改用户信息
const PutUsersByUserIdHandler = async () => {
    const res = await PutUsersByUserId(2, {
        username: 'harmonyOS',
        deptName: '鸿蒙开发'
    })

    console.log(res);

}

// delete 删除用户
const DeleteUsersByIdsHandler = async () => {
    const res = await DeleteUsersByIds('122')
    console.log(res);
}


</script>

<style lang="scss" scoped>
button {
    margin: 10px;
}
</style>